import React, { Component, PropTypes } from 'react'
import TodoItem from './TodoItem'
import Footer from './Footer'


// 相当于在定义一个 action 列表 
// import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters'

// // 对象和数组解构
// const TODO_FILTERS = {
//   [SHOW_ALL]: () => true,
//   [SHOW_ACTIVE]: todo => !todo.completed,
//   [SHOW_COMPLETED]: todo => todo.completed
// }

class MainSection extends Component {
  constructor(props, context) {
    super(props, context)
    // this.state = { filter: SHOW_ALL }
  }

  // handleClearCompleted() {
  //   const atLeastOneCompleted = this.props.todos.some(todo => todo.completed)
  //   if (atLeastOneCompleted) {
  //     this.props.actions.clearCompleted()
  //   }
  // }

  // handleShow(filter) {
  //   this.setState({ filter })
  // }

  // renderToggleAll(completedCount) {
  //   const { todos, actions } = this.props
  //   if (todos.length > 0) {
  //     return (
  //       <input className="toggle-all"
  //         type="checkbox"
  //         checked={completedCount === todos.length}
  //         onChange={actions.completeAll} />
  //     )
  //   }
  // }

  // renderFooter(completedCount) {
  //   const { todos } = this.props
  //   const { filter } = this.state
  //   const activeCount = todos.length - completedCount

  //   if (todos.length) {
  //     return (
  //       <Footer completedCount={completedCount}
  //         activeCount={activeCount}
  //         filter={filter}
  //         onClearCompleted={this.handleClearCompleted.bind(this)}
  //         onShow={this.handleShow.bind(this)} />
  //     )
  //   }
  // }

  render() {
    const { todos, actions } = this.props
    // const { filter } = this.state
    

    // const filteredTodos = todos.filter(TODO_FILTERS[filter])
    // console.log(todos)
    const completedCount = todos.reduce((count, todo) =>
      todo.completed ? count + 1 : count,
      0
    )

    return (
      <section className="main">
         {/* {this.renderToggleAll(completedCount)}  */}
        <ul className="todo-list">
          {todos.map(todo =>
            <TodoItem key={todo.id} todo={todo} {...actions} />
          )}
        </ul>
        {/* Footer 组件 */}
        {/* {this.renderFooter(completedCount)} */}
      </section>
    )
  }
}

export default MainSection
